import React from 'react';
import { Card, Typography, Space, Divider, Row, Col } from 'antd';
import {
    FunctionOutlined,
    AimOutlined,
    ExperimentOutlined,
    CheckCircleOutlined
} from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import styles from './index.module.css';

const { Title, Paragraph, Text } = Typography;

const LevenshteinIntroduction: React.FC = () => {
    // 生成编辑操作示例图表
    const getEditOperationsChart = () => ({
        // title: {
        //     text: '编辑操作示例: "kitten" → "sitting"'
        // },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['替换', '插入', '删除']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['k→s', 'e→i', '→g'],
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            type: 'value',
            name: '操作次数'
        },
        series: [
            {
                name: '替换',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [1, 1, 0]
            },
            {
                name: '插入',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [0, 0, 1]
            },
            {
                name: '删除',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [0, 0, 0]
            }
        ]
    });

    // 生成动态规划矩阵示例
    const getDPMatrixChart = () => ({
        title: {
            text: '动态规划矩阵示例'
        },
        tooltip: {
            position: 'top'
        },
        grid: {
            height: '50%',
            top: '10%'
        },
        xAxis: {
            type: 'category',
            data: ['', 'k', 'i', 't', 't', 'e', 'n'],
            splitArea: {
                show: true
            }
        },
        yAxis: {
            type: 'category',
            data: ['', 's', 'i', 't', 't', 'i', 'n', 'g'],
            splitArea: {
                show: true
            }
        },
        visualMap: {
            min: 0,
            max: 7,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%'
        },
        series: [{
            name: '编辑距离',
            type: 'heatmap',
            data: [
                [0, 0, 0], [0, 1, 1], [0, 2, 2], [0, 3, 3], [0, 4, 4], [0, 5, 5], [0, 6, 6],
                [1, 0, 1], [1, 1, 1], [1, 2, 2], [1, 3, 3], [1, 4, 4], [1, 5, 5], [1, 6, 6],
                [2, 0, 2], [2, 1, 2], [2, 2, 1], [2, 3, 2], [2, 4, 3], [2, 5, 4], [2, 6, 5],
                [3, 0, 3], [3, 1, 3], [3, 2, 2], [3, 3, 1], [3, 4, 2], [3, 5, 3], [3, 6, 4],
                [4, 0, 4], [4, 1, 4], [4, 2, 3], [4, 3, 2], [4, 4, 1], [4, 5, 2], [4, 6, 3],
                [5, 0, 5], [5, 1, 5], [5, 2, 4], [5, 3, 3], [5, 4, 2], [5, 5, 2], [5, 6, 3],
                [6, 0, 6], [6, 1, 6], [6, 2, 5], [6, 3, 4], [6, 4, 3], [6, 5, 3], [6, 6, 2],
                [7, 0, 7], [7, 1, 7], [7, 2, 6], [7, 3, 5], [7, 4, 4], [7, 5, 4], [7, 6, 3]
            ],
            label: {
                show: true
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    });

    return (
        <div className={styles.container}>
            <Card className={styles.mainCard}>
                <Typography>
                    <Title level={2}>
                        <FunctionOutlined /> Levenshtein 编辑距离算法说明
                    </Title>

                    <Divider />

                    <section className={styles.section}>
                        <Title level={3}>
                            <AimOutlined /> 算法原理
                        </Title>
                        <Paragraph>
                            Levenshtein距离（编辑距离）是指两个字符串之间，由一个转换成另一个所需的最少编辑操作次数。
                            允许的编辑操作包括：插入一个字符、删除一个字符、替换一个字符。编辑距离越小，表示两个字符串越相似。
                        </Paragraph>

                        <Row gutter={24} className={styles.formulaSection}>
                            <Col span={12}>
                                <Card className={styles.formulaCard}>
                                    <Title level={4}>计算公式</Title>
                                    <div className={styles.formula}>
                                        <Text code>
                                            dp[i][j] = min(dp[i-1][j]+1, dp[i][j-1]+1, dp[i-1][j-1]+cost)
                                        </Text>
                                    </div>
                                    <Paragraph>
                                        其中：
                                        <ul>
                                            <li>dp[i][j] 表示字符串1的前i个字符到字符串2的前j个字符的编辑距离</li>
                                            <li>cost = 0 如果第i个字符等于第j个字符，否则为1</li>
                                            <li>最终的dp[m][n]即为所求的编辑距离</li>
                                        </ul>
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card className={styles.visualizationCard}>
                                    <ReactECharts option={getEditOperationsChart()} style={{ height: '300px' }} />
                                </Card>
                            </Col>
                        </Row>

                        <Row gutter={24} style={{ marginTop: '24px' }}>
                            <Col span={24}>
                                <Card className={styles.visualizationCard}>
                                    <ReactECharts option={getDPMatrixChart()} style={{ height: '400px' }} />
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <ExperimentOutlined /> 应用场景
                        </Title>
                        <Row gutter={[24, 24]}>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>拼写检查</Title>
                                    <Paragraph>
                                        在文本编辑器中进行拼写错误检测和
                                        自动纠正建议。
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>DNA序列比对</Title>
                                    <Paragraph>
                                        在生物信息学中比较DNA序列的
                                        相似度和差异。
                                    </Paragraph>
                                </Card>
                            </Col>
                            <Col span={8}>
                                <Card className={styles.scenarioCard}>
                                    <Title level={4}>模糊搜索</Title>
                                    <Paragraph>
                                        实现近似字符串匹配和
                                        容错搜索功能。
                                    </Paragraph>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <CheckCircleOutlined /> 算法优势
                        </Title>
                        <Row gutter={[24, 24]}>
                            <Col span={12}>
                                <Card className={styles.advantageCard}>
                                    <ul className={styles.advantageList}>
                                        <li>计算结果直观明确</li>
                                        <li>可处理任意字符串</li>
                                        <li>考虑字符位置信息</li>
                                        <li>动态规划优化性能</li>
                                    </ul>
                                </Card>
                            </Col>
                            <Col span={12}>
                                <Card className={styles.advantageCard}>
                                    <ul className={styles.advantageList}>
                                        <li>适用于短文本比较</li>
                                        <li>支持多种编辑操作</li>
                                        <li>结果可解释性强</li>
                                        <li>实现相对简单</li>
                                    </ul>
                                </Card>
                            </Col>
                        </Row>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>
                            <CheckCircleOutlined /> 实现步骤
                        </Title>
                        <Card className={styles.implementationCard}>
                            <Title level={4}>基本流程</Title>
                            <ol className={styles.stepsList}>
                                <li>
                                    <Text strong>初始化：</Text>
                                    <Paragraph>
                                        创建(m+1)×(n+1)的动态规划矩阵，初始化第一行和第一列。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>填充矩阵：</Text>
                                    <Paragraph>
                                        按照动态规划公式计算每个单元格的值。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>判断字符：</Text>
                                    <Paragraph>
                                        比较对应位置的字符，决定是否需要替换操作。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>更新距离：</Text>
                                    <Paragraph>
                                        取插入、删除、替换三种操作的最小值。
                                    </Paragraph>
                                </li>
                                <li>
                                    <Text strong>返回结果：</Text>
                                    <Paragraph>
                                        矩阵右下角的值即为最终的编辑距离。
                                    </Paragraph>
                                </li>
                            </ol>
                        </Card>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>使用注意事项</Title>
                        <Card className={styles.noticeCard}>
                            <ul className={styles.noticeList}>
                                <li>时间复杂度为O(mn)</li>
                                <li>空间复杂度为O(mn)</li>
                                <li>不适合长文本比较</li>
                                <li>对大小写敏感</li>
                                <li>需要考虑字符编码问题</li>
                            </ul>
                        </Card>
                    </section>

                    <section className={styles.section}>
                        <Title level={3}>更新信息</Title>
                        <Card className={styles.updateCard}>
                            <Paragraph>
                                <Text strong>最后更新时间：</Text> 2025-03-28 15:55:34 UTC
                            </Paragraph>
                            <Paragraph>
                                <Text strong>文档维护者：</Text> lijiajunjxstnu
                            </Paragraph>
                        </Card>
                    </section>
                </Typography>
            </Card>
        </div>
    );
};

export default LevenshteinIntroduction;
